<template>
  <div
    class="h-[189px] relative before:bg-[length:100%_100%] before:absolute before:bg-boxHeaderBg before:bg-no-repeat before:top-0 before:left-0 before:right-0 before:h-[36px]"
  >
    <!-- 头部区域 -->
    <BoxHeader :title="title"></BoxHeader>
    <!-- 主体区域 -->
    <div class="flex flex-row justify-center">
      <div class="flex flex-row">
        <div class="font-family-DINPro text-[90px] text-[#EB301B] leading-[100px]">92.96</div>
        <div
          class="font-family-DINPro text-[40px] text-[#90B6D8] leading-[50px] flex flex-col justify-end pb-[12px]"
        >
          %
        </div>
      </div>
    </div>
    <!-- 底部区域 -->
    <div class="h-[45px] flex flex-row justify-around items-center bg-blue-500">
      <!-- 📌  unfiled/5JfY2P26SXd7LKecfGfrdR.md 📝 🗑️ -->
      <div class="flex flex-row">
        <div class="text-[16px] text-[#90B6D8] font-family-MicrosoftYaHei">年度累计</div>
        <div
          class="text-[24px] text-[#F0F9FF] ml-[12px] flex flex-col justify-center pt-[3px] leading-none font-family-DINPro"
        >
          91.72%
        </div>
      </div>
      <div class="flex flex-row">
        <div class="text-[16px] text-[#90B6D8] font-family-MicrosoftYaHei">年度累计</div>
        <div
          class="text-[24px] text-[#F0F9FF] ml-[12px] flex flex-col justify-center pt-[3px] leading-none font-family-DINPro"
        >
          91.72%
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  title: string
}>()
</script>

<style scoped></style>
